﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>日志</title>
<link rel="stylesheet" type="text/css" href="styles/index.css"/>
<script type="text/javascript" src="navigation.js"></script>
</head>
<body>
    <div id="container">
		<div id="banner">
		      <div id="globallink">
					<ul>
						  <li><a href="index.html">主页</a></li>
						  <li><a class="current" href="diary.html">日志</a></li>
						  <li><a href="message.html">留言板</a></li>
						  <li><a href="infor.html">个人信息</a></li>				  
					</ul>
			    <br>
		      </div>
		</div>
        <div id="left">
	
				<div id="parameter">
					    <div id="latest">
							   <h4><a href="menu1.html" class="menuLink">最近文章</a></h4>
							   <ul class="menu" id="menu1">
									  <li><a href="#">HTML+CSSS主流思想</a></li>
									  <li><a href="#">网页设计</a></li>
									  <li><a href="#">色彩理论</a></li>
									  <li><a href="#">书籍</a></li>	
									  <li><a href="#">实验室</a></li>
									  <li><a href="#">php程序</a></li>
									  <li><a href="#">JavaScript教程</a></li>
									  <li><a href="#">数据库设计</a></li>							  
							   </ul>
				        </div>
				        <div id="category">
							   <h4><a href="menu2.html" class="menuLink">文章分类</a></h4>
							   <ul class="menu" id="menu2">
									  <li><a href="#">HTML+CSSS主流思想</a></li>
									  <li><a href="#">网页设计</a></li>
									  <li><a href="#">色彩理论</a></li>
									  <li><a href="#">书籍</a></li>	
									  <li><a href="#">实验室</a></li>
									  <li><a href="#">php程序</a></li>
									  <li><a href="#">JavaScript教程</a></li>
									  <li><a href="#">数据库设计</a></li>							  
							   </ul>
				        </div>
				        <div id="links">
							   <h4><a href="menu3.html" class="menuLink">网站链接</a></h4>
							   <ul class="menu" id="menu3">
									  <li><a href="#">HTML+CSSS主流思想</a></li>
									  <li><a href="#">网页设计</a></li>
									  <li><a href="#">色彩理论</a></li>
									  <li><a href="#">书籍</a></li>	
									  <li><a href="#">实验室</a></li>
									  <li><a href="#">php程序</a></li>
									  <li><a href="#">JavaScript教程</a></li>
									  <li><a href="#">数据库设计</a></li>							  
							   </ul>
				        </div>
					   
				</div>

		</div>
		<div id="main">
		 
		      			 <div class="artical">
			         <h4><a href="#">CSS兼容问题</a></h4>
					 <p class="time">2010-6-8 11:55:20</p>
					 <p class="content">1、FF下给 div 设置 padding 后会导致 width 和 height 增加，但IE不会。（可用!important解决）

2、居中问题。
1) 垂直居中。将 line-height 设置为 当前 div 相同的高度，再通过 vertical-align: middle. （注意内容不要换行）
2) 水平居中。 margin: 0 auto; （当然不是万能）

3、若需给 a 标签内内容加上 样式，需要设置 display: block; （常见于导航标签）

4、FF 和 IE 对 BOX 理解的差异导致相差 2px 的还有设为 float 的 div 在 ie 下 margin 加倍等问题。

5、ul 标签在 FF 下面默认有 list-style 和 padding 。最好事先声明，以避免不必要的麻烦。（常见于导航标签和内容列表）

6、作为外部 wrapper 的 div 不要定死高度，最好还加上 overflow: hidden ，以达到高度自适应。（表示当块里的内容超出时，走出部分将被隐藏。）

7、关于手形光标。 cursor: pointer ，而 hand 只适用于 IE。

8、至于IE5以及其他浏览器就没有必要兼顾了，在这上面花时间不值得。

9.FireFox火狐:div设置margin-left,margin-right为auto时已经居中,IE不行

10.FireFox火狐:body设置text-align时,div需要设置margin:auto(主要是 margin-left,margin-right)方可居中

11，谷歌游览器：设置body居中时，li标记前的圆点会选择左对齐，内容与圆点相隔开。

12.FireFox火狐:支持!important,IE则忽略,可用!important为FireFox火狐特别设置样式

13这个针对不同的浏览器写不同的CSS code的过程，就叫CSS hack,也叫写CSS hack。 

14 a 元素是是一个行内元素，display：block；就是将他强行转化为块级元素。行内元素没有没有上下填充,也就是说你设置padding-top padding-bottom将是徒劳，#mainnav li a{display:block;width:80px;height:29px;line-height:30px;color:#fff;text-decoration:none;text-align:center;}

15是让连接表现得像块极元素，增大起点击区域。以为你后面的a:hove背景图片的实现打下基础。float的意思是让文档（标签）脱离普通文档流的一种方法，它是用来定位的其中一种方法。float:left表示的是让第一个浮动元素相对于其父元素的左边对齐，后面的元素（在同一个嵌套级别）接上前面的一个元素贯穿在同一条线上，也就是整齐的对准在同一行上。浮动的时候，如果没有对父元素显视的设置宽度的话，它会自动收缩，你对父元素设置背景色就可以看到。这一点在设计导航条的时候尤其要注意

16 对于div标签的默认显示方式：div标签是块级元素，也就是在他显示的行内不会有其他的块级元素，它会自动换行的。
</p>				 
				     <p class="show"><a href="#">read more<<</a></p>
					 
		    </div>

		      <div class="artical">
			         <h4><a href="#">CI去掉默认的index.php</a></h4>
					 <p class="time">2010-6-8 11:55:20</p>
					 <p class="content">下面是IE的条件注释，个人觉得用条件注释调用相应兼容是比较完美的多浏览器兼容的解决办法。
					 把需要兼容的地方单独放到一个文件里面，当浏览器版本符合的 时候就可以调用那个被兼容的样式，这样不仅使用起来非常方便，
					 而且对于制作这个CSS本身来讲，可以更严格的观察到是否有必要使用兼容，很多情况下，当我 本人写CSS如果把全部代码包括兼
					 容都写到一个CSS文件的时候的时候会很随意，想怎么兼容就怎么兼容，而你独立出来写的时候，你就会不自觉的考虑是否有 
					 必要兼容，是先兼容 CSS？还是先把主CSS里面的东西调整到尽可能的不需要兼容？当你仅用很少的兼容就让很多浏览器很乖
					 很听话的时候，你是不是很有成就感呢？你知道怎么选 择了吧～～呵呵</p>				 
				     <p class="show"><a href="#">read more<<</a></p>
					 
		    </div>
		</div>
	</div>
	<div id="footer"><p>copyright@2010-6-8 designed by fsdfahsdfdsfg | <a href="#">后台登陆</a></p></div>
</body>
</html>
	